<template>
<div class="scene">
<ul>
<li class="border-bottom" v-for="time of scene" :key="time.id">
<div class="re-price">
<span>{{ time.name}}</span>
<p>&yen;<em> {{ time.Price }}</em></p>
</div>
<div class="reserve">
<div class="re-time">
<time>
<img src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png" />
<span> {{ time.time }}</span>
</time>
<p> {{ time.desc }}</p>
</div>
<div class="re-prices">
<button>预订</button>
</div>
</div>
</li>
</ul>
</div>
</template>

<script>
export default {
  name: 'Scene',
  props: {
    scene: Array
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .scene
    ul
      width 100%
      background #f5f5f5
      li
        padding 0.25rem
        .re-price
          overflow hidden
          p
            font-size 0.3rem
            text-align center
            color #ff9800
            em
              font-size 0.4rem
          span
            display inline-block
            font-size 0.24rem
            width 59%
            float left
            line-height 0.3rem
            font-weight 400
            margin-left 0.06rem
        .reserve
          overflow hidden
          font-size 0.14rem
          .re-time
            float left
            color gray
            span
              font-size 0.16rem
            p
             color #000000
            time
              display inline-block
              font-size 0.3rem
              margin 0.16rem 0
              img
               width 0.28rem
               height 0.32rem
            p
              font-size 0.3rem
               color #ff9800
          .re-prices
            float right
            margin-top 0.16rem
            button
              width 3.2rem
              height 0.8rem
              border-radius 0.1rem
              color white
              font-size 0.3rem
              background #ff9800
</style>
